<!--
 * @Author: yfp
 * @Date: 2024-03-30 20:00:53
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-08-05 11:29:43
 * @Description: 
-->
<template>
  <div class="chat-room" ref="demos">
    <div class="data_box div_class">
      <div class="top_class margins ">
        <div class="tip_tag_class">
          <span>{{ props.selectName.name }}</span>
          <el-tag :type="props.selectName.state=='已生效'?'success':'warning'">{{ props.selectName.state }}</el-tag>
        </div>
        <el-button size="small" @click="closeDetail">返回管理界面</el-button>
      </div>
      <p class="msg_class margins">{{ props.selectName.msg }}</p>
      <div class="tag_box margins">
        <div>
          <el-tag v-for="tags in props.selectName.tagList" :type="tags.type" class="tag_class">{{ tags.name
          }}</el-tag>
        </div>
        <div>
          <el-button size="small" type="primary" @click="submits('保存')">保存</el-button>
          <el-button size="small" type="primary" @click="submits('启动生效')">启动生效</el-button>
          <el-button size="small" type="danger"  @click="submits('终止生效')">终止生效</el-button>
        </div>
      </div>
    </div>
    <div class="div_class">
      <blueLine tip="大模型底座">
      </blueLine>
      <el-form :model="form" :inline="true" @submit.prevent>
        <el-form-item label="模型名称" prop="name" class="bigSelect1">
          <el-input v-model="form.name" :disabled="true" />
        </el-form-item>
        <el-form-item label="模型描述" prop="message" class="bigSelect2">
          <el-input v-model="form.message" :disabled="true" />
        </el-form-item>
      </el-form>
    </div>
    <div class="div_class">
      <blueLine @clicks="clicks1" tip="知识学习" text="知识学习模块包含任务相关的基础知识及背景信息，帮助大模型更容易理解用户需求"
        btn="add,edit,more">
      </blueLine>
      <div class="study_class" ref="studyRef">
        <div v-for="(item, index) in studyList" class="study_item_class">
          <span style="width:calc(100% - 35px);"  v-if="item.tip" class="study_p_class">{{ index + 1 }}、{{ item.tip }}</span>
          <el-input v-if="!item.tip" :disabled="!showStu" v-model="item.tip" style="width:calc(100% - 35px);" placeholder="知识学习标题" />
          <el-icon v-if="showStu" style="margin: 10px;" size="14" @click="changeDel(index)">
            <Delete></Delete>
          </el-icon>
          <el-input v-model="item.msg" :disabled="!showStu" :autosize="{ minRows: 4, maxRows: 30 }" type="textarea"
              placeholder="知识学习内容" />
          <!-- <div class="study_item_msg_class">
            <template v-if="item.msg.indexOf('\n') !== -1">
              <pre>{{ item.msg }}</pre>
            </template>
            <template v-if="item.msg.indexOf('\n') === -1">
              <div style="text-indent: 4ch;">{{ item.msg }}</div>
            </template>
          </div> -->
        </div>
      </div>
    </div>
    <div class="div_class">
      <blueLine @clicks="clicks2" tip="事件案例" text="案例学习模块由不同的典型信号组合构成，案例中需包括告警信号详情、对应操作内容、所属操作子类型、数据标注等信息"
        btn="add,more">
      </blueLine>
      <div class="case_class" ref="caseRef">
        <div v-for="(item,index) in caseList" class="case_item_class">
          <div class="case_tip_class">
            <p>{{ item.tip }}</p>
            <div>
              <el-button size="small" v-if="index == tableIndex" type="primary" @click="tableAdd(index)">新增</el-button>
              <el-button size="small" type="primary" @click="tableEdit(index)">编辑</el-button>
              <el-button size="small" type="danger" @click="tableDel(index)">移除</el-button>
            </div>
          </div>
          <el-table :data="item.table" :header-cell-style="tableColor" height="360" style="width: 100%" size="small"
            element-loading-text="Loading...">
            <template v-if="index == tableIndex" >
              <el-table-column type="index" width="60" label="序号" ></el-table-column>
              <el-table-column prop="主站接收时间" label="主站接收时间" >
                 <template #default="scope">
                    <el-input v-model="scope.row.主站接收时间" placeholder="主站接收时间" />
                  </template>
              </el-table-column>
              <el-table-column prop="所属厂站" label="所属厂站" >
                <template #default="scope">
                  <el-input v-model="scope.row.所属厂站" placeholder="所属厂站" />
                </template>
              </el-table-column>
              <el-table-column prop="装置" label="装置" >
                <template #default="scope">
                  <el-input v-model="scope.row.装置" placeholder="装置" />
                </template>
              </el-table-column>
              <el-table-column prop="遥信点" label="遥信点" >
                <template #default="scope">
                  <el-input v-model="scope.row.遥信点" placeholder="遥信点" />
                </template>
              </el-table-column>
              <el-table-column prop="值" label="值" >
                 <template #default="scope">
                    <el-input v-model="scope.row.值" placeholder="值" />
                  </template>
              </el-table-column>
              <el-table-column prop="操作内容" label="操作内容" >
                <template #default="scope">
                  <el-input v-model="scope.row.操作内容" placeholder="操作内容" />
                </template>
              </el-table-column>
              <el-table-column prop="操作子类型" label="操作子类型" >
                <template #default="scope">
                  <el-input v-model="scope.row.操作子类型" placeholder="操作子类型" />
                </template>
              </el-table-column>
              <el-table-column prop="数据标注" label="数据标注" >
                <template #default="scope">
                  <el-input v-model="scope.row.数据标注" placeholder="数据标注" />
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column type="index" width="60" label="序号" ></el-table-column>
              <el-table-column prop="主站接收时间" width="200" label="主站接收时间" >
              </el-table-column>
              <el-table-column prop="所属厂站" width="120" label="所属厂站" >
              </el-table-column>
              <el-table-column prop="装置" label="装置" >
              </el-table-column>
              <el-table-column prop="遥信点" label="遥信点" >
                </el-table-column>
              <el-table-column prop="值" width="100" label="值" >
              </el-table-column>
              <el-table-column prop="操作内容" label="操作内容" >
              </el-table-column>
              <el-table-column prop="操作子类型" width="150" label="操作子类型" >
              </el-table-column>
              <el-table-column prop="数据标注" width="170" label="数据标注" >
              </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
    </div>
    <div class="div_class">
      <blueLine btn="edit" @clicks="clicks4" tip="回答格式" text="回答格式模块明确了提示指令的输入输出形式">
      </blueLine>
      <div class="answer_class" ref="answerRef">
        <div v-for="(item,index) in answerList" :style="{width:index==0?'60%':'37%'}" class="answer_item_class">
          <div class="answer_tip_class">
            <p>{{ item.tip }}</p>
          </div>
          <!-- <div style="padding: 14px 10px; border: 1px solid #E5E6EB;border-radius: 8px;">
            <div style="font-size: 14px;font-weight: bold;line-height: 22px;letter-spacing: 0px;color: #3D3D3D;">
              序号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              主站接收时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              所属厂站&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              装置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              遥信点&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              值</div>
            <pre style="color: #4E5969;font-size: 14px;">{{ item.msg }}</pre>
          </div> -->
          <el-input v-model="item.msg" :disabled="showOn" :autosize="{ minRows: 2, maxRows: 30 }" type="textarea"
            placeholder="Please input" />
        </div>
      </div>
    </div>
    <div class="div_class">
      <blueLine btn="one" @clicks="clicks3" tip="效果展示" text="效果展示模块能够根据用户提供的内容，自动生成完整的提示工程指令"></blueLine>
      <!-- <div style="padding: 14px 10px; border: 1px solid #4494FC;border-radius: 8px;">
        <div style="font-size: 14px;font-weight: bold;line-height: 22px;letter-spacing: 0px;color: #3D3D3D;">{{ showes }}</div>
        <pre style="color: #4E5969;font-size: 14px;">{{ showMsg }}</pre>
      </div> -->
      <el-input v-if="showEdit" v-model="msgInfo" :autosize="{ minRows: 2, maxRows: 30 }" type="textarea" placeholder="Please input" />
      <el-input v-else  :autosize="{ minRows: 2, maxRows: 30 }" type="textarea" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted ,onBeforeUnmount} from "vue";
const emit = defineEmits(["closeDetail"]);
import blueLine from "./blueLine.vue";
import { ElMessage } from "element-plus";
import hisRecord from "@/api/hisRecord";

const scoll = ref(null)
let studyRef = ref()
let caseRef = ref()
const demos = ref()
let showEdit = ref(false)
let showOn = ref(true)
const tableColor = {
  backgroundColor: '#F2F3F5',
  borderColor: '#F2F3F5',
}
const props = defineProps({
  selectName: {
    type: String,
    default() {
      return "";
    },
  }
});
const handWheel = (event) => {
  const deltaY = event.deltaY
  if (deltaY < 0) {
    scoll.value = 'up'
  }
}

const form = ref({
  name: '大瓦特',
  message: '大瓦特模型是基于国产算力集群和国产训练框架自主研发的电力垂直领域大模型，采用Llama-13B结构作为大模型底座，从零开始进行L0底座训练和微调，覆盖调度、输电、变电等十余个领域。'
})
const studyList = ref([
  {
    is: false,
    tip: props.selectName.code + '保护定值修改包括哪些步骤？',
    msg: props.selectName.code + `保护定值修改通常涉及以下几个步骤：
1、安全措施执行：检查所需退出的出口压板、功能压板已退出；
2、定值修改：在人机接口上进行定值的修改，并完成定值下装。
3、恢复安措：检查并恢复已退出的功能压板、出口压板`
  },
  {
    is: false,
    tip: props.selectName.code + '保护在执行安措时会产生哪些信号？',
    msg: props.selectName.code + '保护在执行安措时需要退出差动压板，此过程会使得本对侧装置差动压板投退不一致，因此会产生“通道一差动压板不一致”、“通道二差动压板不一致”、“装置报警”等信号'
  },
  {
    is: false,
    tip: props.selectName.code + '保护在下装定值时会产生哪些信号？',
    msg: props.selectName.code + '保护在下装定值过程中，定值需要装置软重启后生效，此时通道会出现短暂中断，同时针对12版保护，装置闭锁后需要重新校时，因此会产生“定值修改”、“装置闭锁”、“对时异常”、“装置报警”、“通道一通道异常”、“通道一无有效帧”、“通道二通道异常”、“通道二无有效帧”等信号'
  },
  {
    tip: props.selectName.code + '保护在恢复安措时会产生哪些信号？',
    msg: props.selectName.code + '保护在恢复安措时与执行安措类似，需要投入差动压板，此过程会使得本对侧装置差动压板投退不一致，因此会产生“通道一差动压板不一致”、“通道二差动压板不一致”、“装置报警”等信号'
  },
  // {
  //   tip: 'PCS-931N5Y保护在下装定值时会产生哪些信号？',
  //   msg: 'PCS-931N5Y保护在下装定值过程中，定值需要装置软重启后生效，此时通道会出现短暂中断，同时针对12版保护，装置闭锁后需要重新校时，因此会产生“定值修改”、“装置闭锁”、“对时异常”、“装置报警”、“通道一通道异常”、“通道一无有效帧”、“通道二通道异常”、“通道二无有效帧”等信号'
  // },
])
const caseList = ref([
  {
    tip: '案例1',
    table: [
      {
        主站接收时间: '2023-11-13 08:03:09',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '通道一差动压板不一致',
        值: '告警',
        操作内容: '装置闭锁',
        操作子类型: '退出功能压板',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:08',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '装置报警',
        值: '告警',
        操作内容: '对时异常',
        操作子类型: '退出功能压板',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:08',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '通道一差动压板不一致',
        值: '告警',
        操作内容: '定值修改',
        操作子类型: '退出功能压板',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:03',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '通道一差动压板不一致',
        值: '返回',
        操作内容: '对时异常',
        操作子类型: '退出功能压板',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:03',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '通道一差动压板不一致',
        值: '返回',
        操作内容: '装置闭锁',
        操作子类型: '退出功能压板',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:12',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '装置报警',
        值: '返回',
        操作内容: '定值修改',
        操作子类型: '退出功能压板',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:12',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: 'PT断线',
        值: '告警',
        操作内容: '----',
        操作子类型: '----',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:12',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '定值修改',
        值: '返回',
        操作内容: '通道二通道异常',
        操作子类型: '定值下装',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:11',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '装置闭锁',
        值: '告警',
        操作内容: '通道一通道异常',
        操作子类型: '定值下装',
        数据标注: '是'
      },
      {
        主站接收时间: '2023-11-13 08:03:11',
        所属厂站: '马窝换流站',
        装置: '220kV电马丁线主一保护PCS-931N2',
        遥信点: '对时异常',
        值: '告警',
        操作内容: '通道二对侧异常闭锁差动',
        操作子类型: '定值下装',
        数据标注: '是'
      },
    ]
  },
  // {
  //   tip: '案例2',
  //   table: [
  //     {
  //       主站接收时间: '2024-03-11 11:21:02.482',
  //       所属厂站: '光坡核电厂',
  //       装置: '500kv光海甲线主一保护PCS931N5Y',
  //       遥信点: '通道一差动压板不一致',
  //       值: '告警',
  //       操作内容: '通道一差动压板不一致',
  //       操作子类型: '退出功能压板',
  //       数据标注: '是'
  //     },
  //     {
  //       主站接收时间: '2024-03-11 11:21:02.482',
  //       所属厂站: '光坡核电厂',
  //       装置: '500kv光海甲线主一保护PCS931N5Y',
  //       遥信点: '通道一差动压板不一致',
  //       值: '告警',
  //       操作内容: '通道一差动压板不一致',
  //       操作子类型: '退出功能压板',
  //       数据标注: '是'
  //     },
  //     {
  //       主站接收时间: '2024-03-11 11:21:02.482',
  //       所属厂站: '光坡核电厂',
  //       装置: '500kv光海甲线主一保护PCS931N5Y',
  //       遥信点: '通道一差动压板不一致',
  //       值: '告警',
  //       操作内容: '通道一差动压板不一致',
  //       操作子类型: '退出功能压板',
  //       数据标注: '是'
  //     },
  //     {
  //       主站接收时间: '2024-03-11 11:21:02.482',
  //       所属厂站: '光坡核电厂',
  //       装置: '500kv光海甲线主一保护PCS931N5Y',
  //       遥信点: '通道一差动压板不一致',
  //       值: '告警',
  //       操作内容: '通道一差动压板不一致',
  //       操作子类型: '退出功能压板',
  //       数据标注: '是'
  //     },
  //     {
  //       主站接收时间: '2024-03-11 11:21:02.482',
  //       所属厂站: '光坡核电厂',
  //       装置: '500kv光海甲线主一保护PCS931N5Y',
  //       遥信点: '通道一差动压板不一致',
  //       值: '告警',
  //       操作内容: '通道一差动压板不一致',
  //       操作子类型: '退出功能压板',
  //       数据标注: '是'
  //     },
  //     {
  //       主站接收时间: '2024-03-11 11:21:02.482',
  //       所属厂站: '光坡核电厂',
  //       装置: '500kv光海甲线主一保护PCS931N5Y',
  //       遥信点: '通道一差动压板不一致',
  //       值: '告警',
  //       操作内容: '通道一差动压板不一致',
  //       操作子类型: '退出功能压板',
  //       数据标注: '是'
  //     },
  //   ]
  // },
])
onBeforeUnmount(() => {
  window.removeEventListener('wheel', handWheel)
})
onMounted(() => {
  window.addEventListener('wheel', handWheel)
  hisRecord.showSave({saveName: props.selectName.code }).then((res) => {
    console.log(res, '======================')
    studyList.value = JSON.parse(res.data.info1)
    answerList.value = JSON.parse(res.data.info2)
    caseList.value = res.data.data_info.map((el) => {
      return {...el,table: JSON.parse(el.table)}
    })
    // const datas = caseList.value.map(el => {
    //   return { ...el, table: JSON.stringify(el.table) }
    // })
    // const data = {
    //   saveName: props.selectName.code,
    //   info1: JSON.stringify(studyList.value),
    //   data_info: datas,
    //   info2: JSON.stringify(answerList.value),
    // }
  }).catch((err) => {
    console.log(err,'-------------------------')
  });
})
const answerList = ref([
  {
    tip: 'Prompt:',
    msg: '\n1、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n2、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n3、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n4、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n5、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n6、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n7、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n8、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n9、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n10、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 判断是否是定值修改信号\n'
  },
  {
    tip: 'OutPut:',
    msg: '\n1、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n2、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n3、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n4、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n5、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n6、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n7、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n8、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n9、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n10、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n'
  }
])

const tales = ref('序号    主站接收时间     所属厂站     装置     遥信点   值')
const showMsg = ref('你是一个继电保护领域的专家，能够在海量告警信号中找到PCS-931N5Y保护定值修改相关的信号。PCS-931N5Y保护定值修改一般包括安措执行、定值修改、恢复安措三个步骤，在安措执行过程中会退出差动压板，产生“通道一差动压板不一致”、“通道二差动压板不一致”、“装置报警”等信号；在定值修改过程中，定值需要在装置软重启后生效，此时通道会出现短暂中断，同时针对12版保护，装置闭锁后需要重新校时，因此会产生“定值修改”、“装置闭锁”、“对时异常”、“装置报警”、“通道一通道异常”、“通道一无有效帧”、“通道二通道异常”、“通道二无有效帧”等信号；在恢复安措过程中，需要重新投入差动压板，产生“通道一差动压板不一致”、“通道二差动压板不一致”、“装置报警”等信号。请参考事件案例和回答格式，判断出以下告警信号哪些属于PCS-931N5Y保护定值修改信号。\n\n1、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n2、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n3、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n4、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n5、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n6、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n7、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n8、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n9、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 是\n10、2024-03-11 11:21:02.482 光坡核电厂 500kv光海甲线主一保护PCS931N5Y 报警装置 复归 // 否\n')
const closeDetail = () => {
  emit("closeDetail");
}
const changeDel = (index) => {
  let only = 150
  studyList.value.splice(index, 1)
  studyRef.value.style.height = only * Math.ceil(studyList.value.length / 3) + 'px'
}
const showStu = ref(false)
const clicks1 = (name) => {
  console.log('clicks1', name)
  if (name === 'more') {
    let only = 140
    if (studyRef.value.style.height && studyRef.value.style.height.replace('px', '') > only) {
      studyRef.value.style.height = only + 'px'
    } else {
      studyRef.value.style.height = only * Math.ceil(studyList.value.length / 3) + 'px'
    }
  } else if (name === 'add') {
    let only = 150
    studyList.value.push({
      tip: '',
      msg: '',
      is: true
    })
    // if (studyRef.value.style.height && studyRef.value.style.height.replace('px', '') > only) {
    //   studyRef.value.style.height = only + 'px'
    // } else {
      studyRef.value.style.height = only * Math.ceil(studyList.value.length / 3) + 'px'
    // }
  } else if (name === 'edit') {
    showStu.value = !showStu.value
  }

}
const submits = (name) => {
  
  const datas = caseList.value.map(el => {
    return {...el,table: JSON.stringify(el.table)}
  })
  const data = {
    saveName: props.selectName.code,
    info1: JSON.stringify(studyList.value),
    data_info: datas,
    info2: JSON.stringify(answerList.value),
  }
  hisRecord.saveInfo(data).then((res) => {
    console.log(res)
  }).catch((err) => {
    console.log(err)
  });
  console.log(data)
  ElMessage(
    {
      message: `${name}成功`,
      type: 'success'
    }
  )
  if (name == '终止生效' || name == '启动生效') {
    emit('submits',props.selectName.code,name)
  }
}
let tableIndex = ref(null)
let dats = []
const clicks2 = (name) => {
  console.log('clicks2', name)
  console.log('clicks1', name)
  if (name === 'more') {
    let only = 420
    console.log(caseRef.value.style.height)
    if (caseRef.value.style.height && caseRef.value.style.height.replace('px', '') > only) {
      caseRef.value.style.height = only + 'px'
    } else {
      caseRef.value.style.height = only * caseList.value.length + 'px'
    }
  }
  if (name === 'add') {
    let only = 420
    for (let index = 0; index < 1; index++) {
      dats.push({
        主站接收时间: '',
        所属厂站: '',
        装置: '',
        遥信点: '',
        值: '',
        操作内容: '',
        操作子类型: '',
        数据标注: ''
      })
    }
    caseList.value.push({ tip: `案例${caseList.value.length + 1}`, table: dats })
    caseRef.value.style.height = only * caseList.value.length + 'px'
    dats = []
  }
}
const tableDel = (index) => {
  let only = 420
  caseList.value.splice(index, 1)
  caseRef.value.style.height = only * caseList.value.length + 'px'
}
const tableEdit = (index) => {
  if (tableIndex == index) {
    tableIndex.value = null
  } else {
    tableIndex.value = index
  }
}
let arr = []
const clicks3 = (name) => {
  let index = 0
  scoll.value = 'down'
  showEdit.value = true
  console.log(name, '==========')
  arr = showMsg.value.split('')
  write(30, index)

}
const msgInfo = ref('')
const write = (time, index) => {
  setTimeout(() => {
    msgInfo.value = showMsg.value.substring(0, index)
    // msgInfo.value = msgInfo.value + showMsg.value.substring(index, index + 1)
    index++
    if (scoll.value != 'up') {
      const va = demos.value
      va.scrollTo({top:va.scrollHeight,behavior: 'smooth'})
    }
    if (index < arr.length) {
      write(time,index)
    }
  },time)
}
const clicks4 = (name) => {
  showOn.value = !showOn.value
  // showOn.value = false
  console.log(name, '==========')

}
const tableAdd = (index) => {
  caseList.value[index].table.push({
    主站接收时间: '',
    所属厂站: '',
    装置: '',
    遥信点: '',
    值: '',
    操作内容: '',
    操作子类型: '',
    数据标注: ''
  })
}
</script>

<style scoped>
.chat-room {
  background-color: #F2F3F5;
  width: 100vw;
  height: 100vh;
  padding: 10px 10px 0 10px;
  overflow: auto;
}

.div_class {
  background-color: #fff;
  margin-bottom: 15px;
  padding: 10px;
}

.data_box {
  background-image: url('../assets/beijintu.png');
  background-size: 100% 100%; /* 宽度和高度完全填充 */
  background-repeat: no-repeat;
  background-position: center;
  .tag_box {
    /* margin: 10px 0; */
    display: flex;
    justify-content: space-between;
    align-items: center;

    p {
      font-weight: bold;
    }

    .tag_class {
      margin-top: 10px;
      margin-right: 10px;
    }
  }

  .margins {
    margin-bottom: 10px;
  }

  .top_class {
    display: flex;
    justify-content: space-between;

    .tip_tag_class {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      span {
        font-size: 20px;
        font-weight: bold;
        margin-right: 20px;
      }

      .el-tag {
        font-size: 14px;
      }
    }

  }

  .msg_class {
    width: 35%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 14px;
    /* font-weight: bold; */
    color: gray;
  }

  .tag_class {
    margin-right: 10px;
  }

  .bottom_class {
    display: flex;
    align-items: center;

    p {
      padding: 0 20px;
    }

    .grays {
      font-size: 14px;
      color: gray;
    }

    .line {
      border-left: 1px solid gray;
    }
  }
}

:deep(.el-form .bigSelect1) {
  width: 20%;
}

:deep(.el-form .bigSelect2) {
  width: 70%;
}

.study_class {
  height: 140px;
  overflow: hidden;

  .study_item_class {
    background-color: #fff;
    width: 33.3%;
    float: left;
    padding: 10px;
    height: 140px;

    .study_p_class {
      font-size: 14px;
      font-weight: bold;
    }

    .study_item_msg_class {
      overflow: auto;
      height: 100px;
      background-color: #f2f3f5;
      border-radius: 10px;
      padding: 10px;
      font-size: 12px;
      font-weight: normal;
      color: #4E5969;
      line-height: 20px;
    }
  }
}

.case_class {
  height: 420px;
  overflow: hidden;

  .case_item_class {
    background-color: #fff;
    width: 100%;
    float: left;
    border: 1px solid rgb(231, 227, 227);
    border-radius: 5px;

    .case_tip_class {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      background-color: #e3edf8;
      padding: 5px 15px;

      p {
        color: #409eff;
        font-weight: bold;
      }
    }
  }
}

.answer_class {
  /* height: 320px; */
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;


  .answer_item_class {
    background-color: #fff;
    width: 49%;
    float: left;
    border-radius: 5px;

    .answer_tip_class {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      color: #1D2129;
      p {
        font-weight: bold;
        color: black;
      }
    }
  }
}


/* 设置滚动条宽度 */
::-webkit-scrollbar,
::-ms-scrollbar,
::-moz-scrollbar,
::-o-scrollbar {
  width: 5px;
}
</style>
